<template>
  <div>
    <p>{{age}}</p>
    <button @click="updateAge">update age</button>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('#2')
  },
  created() {
    console.log('#3')
  },
  setup() {
    console.log('#1 比 beforeCreate 和 created 都要早')
    // !这里面不能使用 data 里面的数据和 methods 里面的方法，因为实例还没创建呢，为了防止乱用，作者直接把 this 干为了 undefined
    // console.log(this)

    const age = 18
    const updateAge = () => {
      console.log('~~~')
    }
    // !setup 中定义的数据和方法要想在模板中使用，必须通过 return 返回
    return {
      age,
      updateAge
    }
  }
}
</script>